<html>

<head>
    <title>通义万相API调用示例</title>
    <link rel="icon" href="https://img.alicdn.com/tfs/TB1_ZXuNcfpK1RjSZFOXXa6nFXa-32-32.ico" type="image/x-icon">
    <link href="https://g.alicdn.com/code/lib/bootstrap/4.5.3/css/bootstrap.min.css" rel="stylesheet"
          crossorigin="anonymous">
    <style type="text/css">
        .login-container {
            width: 600px;
            margin: 10% auto;
            border: 1px solid #f0f0f0;
            padding: 30px;
        }

        button {
            padding: 3px 5px;
            border: #ccc 1px solid;
            min-width: 80px;
        }
    </style>
    <script src="https://g.alicdn.com/code/lib/crypto-js/4.1.1/crypto-js.min.js"></script>
</head>
<body>
<div class="login-container shadow-sm align-middle">
    <h4>系统登录</h4>
    <hr/>
    <div class="form-container">
        <div class="alert alert-danger" role="alert" th:if="${message != null}" th:text="${message}">
        </div>
        <form action="submit" method="post">
            <div class="form-group row">
                <label for="inputEmail3" class="col-sm-2 col-form-label">用户名：</label>
                <div class="col-sm-10">
                    <input name="username" type="text" class="form-control" id="inputEmail3" required
                           th:value="${username}">
                </div>
            </div>
            <div class="form-group row">
                <label for="inputPassword3" class="col-sm-2 col-form-label">密码：</label>
                <div class="col-sm-10">
                    <input name="password" type="password" class="form-control" id="inputPassword3" required>
                </div>
            </div>
            <div class="form-group row">
                <div class="col-sm-10">
                    <button type="submit" class="btn btn-primary">登录</button>
                </div>
            </div>
        </form>
    </div>
</div>
</body>
<script>
    document.addEventListener('DOMContentLoaded', function () {
        const form = document.querySelector('form');
        form.addEventListener('submit', function (event) {
            event.preventDefault();
            const passwordInput = document.getElementById('inputPassword3');
            const password = passwordInput.value;
            const hashedPassword = CryptoJS.MD5(password).toString();
            passwordInput.value = hashedPassword;
            form.submit();
        });
    });
</script>
</html>